<template>
	<view class="order-container c-container income-container">
		<navigator class="fixed-right" v-if='order_id' :url="'/pages/order/detail/detail?order_id='+order_id">
			<text>查看定单详情</text>
		</navigator>
		
		<!-- 收款信息 -->
		<income-info :incomeParams="incomeParams" :paymentList="paymentList" :isPreview="isPreview" :startDate="startDate" :endDate="endDate"
			:incomeType="13+''"></income-info>

		<view class="c-row-box">
			<view class="c-row-head">
				<view class="c-row-title">备注</view>
			</view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>备注</view>
						<view class="col-text">
							<textarea v-model="orderParams.remark" placeholder="请输入" :disabled="isPreview" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>收据图片</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item,index) in orderParams.receipt_img" :key="index">
								<image :src="item" mode="widthFix" @click="preViewImage('receipt_img')"></image>
								<uni-icons @click="deleteImageArray(index,'receipt_img')" type="minus-filled" size="10" color="red"
									style="position: absolute;right:0;top: -16upx;" v-if="!isPreview"></uni-icons>
							</view>
							<view class="addPic image-item" @click="chooseImage('receipt_img')" v-if="!isPreview">
								<image src="@/static/add.png" mode="" ></image>
							</view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>小票图片</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item,index) in orderParams.note_img" :key="index">
								<image :src="item" mode="widthFix" @click="preViewImage('note_img')"></image>
								<uni-icons @click="deleteImageArray(index,'note_img')" type="minus-filled" size="10" color="red"
									style="position: absolute;right:0;top: -16upx;" v-if="!isPreview"></uni-icons>
							</view>
							<view class="addPic image-item" @click="chooseImage('note_img')" v-if="!isPreview">
								<image src="@/static/add.png" mode="" ></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部栏-创建 -->
		<view class="footer-box" v-if="confirm_id == 0">
			<view class="footer-action-btn">
				<button size="mini" @click="saveFn">提交</button>
			</view>
		</view>

		<divider title="审核流程" v-if="sequenceData.length > 0 || confirmList.length > 0 || confirmSteps.length > 0">
		</divider>
		<!-- 新版审批流程————创建  -->
		<template v-if="sequenceData.length > 0">
			<steps-create :stepList="sequenceData"></steps-create>
		</template>
		<!-- 老版审核流程 -->
		<template v-if="confirmList.length > 0">
			<auditProcess :value="confirmList" :btnValue="buttons" :isShowBtn="options.api?false:true"
				:transferForm="transferForm" @clearTransferForm="clearTransferForm" @resubmit='resubmits'>
			</auditProcess>
		</template>
		<!-- 新版审核流程————查看 -->
		<template v-if="confirmSteps.length > 0">
			<steps-look :stepList="confirmSteps"></steps-look>
			<footer-action-btn :btnValue="buttons" :transferForm="transferForm" @clearTransferForm="clearTransferForm"
				:isShowBtn="options.api?false:true" @resubmit='resubmits' @transferSubmit="transferSubmit">
			</footer-action-btn>
		</template>

	</view>
</template>

<script>
	import incomeInfo from '@/pages/order/createOrder/common/income.vue'

	import divider from '@/component/divider/divider.vue'
	import stepsLook from '@/component/steps-look/steps-look.vue' // 新版审核流程
	import footerActionBtn from '@/component/footer-action-btn/footer-action-btn.vue' // 底部操作按钮组
	import stepsCreate from '@/component/steps-create/steps-create.vue'
	import auditProcess from '@/component/auditProcess.vue';
	
	import request from '@/utils/request.js';
	export default {
		components: {
			incomeInfo,
			divider,
			stepsCreate,
			stepsLook,
			footerActionBtn,
			auditProcess
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				confirm_id: 0,
				order_id: 0,

				isPreview: false, //是否可以编辑
				options: '',

				orderParams: {
					remark: '',
					receipt_img: [],
					note_img: []
				},

				incomeParams: {
					receivable_no: '',
					income_payment: '',
					income_payment_text: '请选择',
					news_type: '13',
					income_type: 1,
					income_type_text: '请选择',
					income_item_price: '',
					income_date: '请选择',
				},

				paymentList: [],

				confirmList: [], //
				confirm: {}, //审批信息
				buttons: [], //是当前审核可以有的按钮

				transferForm: {
					realname: '',
					user_id: ''
				},
				sequenceData: [], // 新版审核
				confirmSteps: [], // 新版审核
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(options) {
			this.paymentList = uni.getStorageSync('allPicker').paymentList;
			// 添加 从订单详情页添加子项目 包含order_id
			if (options.params) {
				this.options = JSON.parse(options.params);
				this.order_id = this.options.order_id;
				// 审核流程--创建
				this.getConfirmSequence()
			}

			// 审核查看 lookApproval是个对象，包含的id是审核的编号，order_id要从审核详情中获取
			if (options.lookApproval) {
				this.options = JSON.parse(options.lookApproval)
				this.isPreview = true;
				//查看信息
				this.getDetail(this.options)
				this.confirm_id = this.options.id;
				// 审核流程--查看
				this.getConfirmList()
			}

			// 查看 从查看订单审核中进入只有id，这个id是审核的编号，order_id要从审核详情中获取
			if (options.id) {
				this.options = options;
				this.isPreview = true;
				//查看信息
				this.getDetail(this.options)
				this.confirm_id = this.options.id;
				// 审核流程--查看
				this.getConfirmList()
			}
		},
		methods: {
			// 时间选择
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 2;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			//获取查看信息
			getDetail(e) {
				let that = this
				request.request({
					url: '/h5/order.confirm/detail',
					showLoading: true,
					token: true,
					data: {
						id: e.id,
						type: e.user ? 'confirm_user' : '',
					},
					success(res) {
						if (res.code == 200) {
							that.incomeParams = res.data.detail.income;
							that.orderParams = res.data.detail.income;
							that.buttons = res.data.buttons;
							that.confirm = res.data.confirm;
							that.order_id = that.confirm.order_id;
							//判断是否可以编辑
							that.buttons.map((item, index) => {
								if (item.id == 'update') {
									that.isPreview = false;
								}
							})
							that.paymentList.map((item, index) => {
								if (item.id == that.incomeParams.income_payment) {
									that.moneyTypeIndex = index;
									that.incomeParams.income_payment_text = item.title
								}
							})
							that.incomeTypeList = res.data.incomeTypeList ? res.data.incomeTypeList : ''
							that.incomeTypeList.map((item, index) => {
								if (item.id == that.incomeParams.income_type) {
									that.incomeParams.income_type_text = item.title
								}
							})
						}
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})
			},
			
			//选择图片
			chooseImage(type) {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有				     
					success: function(res) {
						that.upImg(res.tempFiles, type)
					}
				});
			},
			
			//上传图片
			upImg(data, type) {
				let that = this;
				uni.showLoading({title:'上传中',mask:true});
				var i = data.i ? data.i : 0; //当前上传的哪张图片
				var success = data.success ? data.success : 0; //上传成功的个数
				var fail = data.fail ? data.fail : 0; //上传失败的个数
				uni.uploadFile({
					url: request.http + "/h5/order.upload/doupload",
					filePath: data[i].path,
					header: {},
					name: 'file',
					formData: {
						token: uni.getStorageSync("token") ? uni.getStorageSync("token") : ''
					},
					success: (res) => {
						if (JSON.parse(res.data).msg == "上传成功") {
							success++; //图片上传成功，图片上传成功的变量+1
							uni.hideLoading()
						}
						if(type == 'receipt_img'){
							that.orderParams.receipt_img.push(JSON.parse(res.data).data.url)
						}
						if(type == 'note_img'){
							that.orderParams.note_img.push(JSON.parse(res.data).data.url)
						}
					},
					fail: () => {
						fail++; //图片上传失败，图片上传失败的变量+1
					},
					complete: () => {
						i++; //这个图片执行完上传后，开始上传下一张
						if (i == data.length) { //当图片传完时，停止调用          
							uni.showToast({
								icon: 'none',
								title: '成功：' + success + " 失败：" + fail,
							})
						} else { //若图片还没有传完，则继续调用函数
							data.i = i;
							data.success = success;
							data.fail = fail;
							that.upImg(data);
						}
					}
				})
			},
			
			//删除图片
			deleteImageArray(index, type) {
				if(type == 'receipt_img'){
					this.orderParams.receipt_img.splice(index, 1)
				}
				if(type == 'note_img'){
					this.orderParams.note_img.splice(index, 1)
				}
			},
			
			// 预览图片
			preViewImage(type){
				if(type == 'receipt_img'){
					uni.previewImage({
						current: 0,
						urls: this.orderParams.receipt_img
					})
				}
				if(type == 'note_img'){
					uni.previewImage({
						urls: this.orderParams.note_img
					})
				}
			},

			// 提交转交
			transferSubmit() {
				let that = this;
				request.request({
					url: '/api/order.audit/transfer',
					showLoading: true,
					token: true,
					data: {
						id: that.confirm_id,
						user_id: that.transferForm.user_id
					},
					success(res) {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
							uni.navigateBack({})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
			// 点击取消时清除转交人员信息
			clearTransferForm() {
				this.transferForm = {
					realname: '',
					user_id: ''
				}
			},

			//查看详情审核流程
			getConfirmList() {
				let that = this
				request.request({
					url: "/api/order.audit/getAuditResult",
					showLoading: true,
					token: true,
					data: {
						id: that.confirm_id
					},
					success(res) {
						that.confirmSteps = res.data.process
					}
				})
			},
			//创建订单时的审核流程
			getConfirmSequence(e) {
				let that = this
				request.request({
					url: "/api/order.audit/getAuditProcess",
					showLoading: true,
					token: true,
					data: Object.assign({
						order_id: that.order_id
					}, {
						audit_type: 'income'
					}, {
						company_id: 0
					}),
					success(res) {
						if (res.code == 200) {
							that.sequenceData = res.data.process
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					}
				})
			},

			//提交审核
			saveFn() {
				let that = this;
				let params = {};
				params['order_id'] = that.order_id;
				params['is_new'] = 1;
				params['income'] = Object.assign(that.incomeParams, that.orderParams)
				console.log(params);
				request.request({
					url: that.options.api,
					showLoading: true,
					token: true,
					data: params,
					success(res) {
						if (res.code == 200) {
							uni.redirectTo({
								url: "/pages/order/index"
							})
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
			// 编辑提交
			editFn(api, id) {
				let that = this;
				let params = {};
				params['order_id'] = that.order_id;
				params['order_confirm_id'] = that.confirm_id;
				params['is_new'] = 1;
				params['income'] = Object.assign(that.incomeParams, that.orderParams)
				request.request({
					url: api,
					showLoading: true,
					token: true,
					data: params,
					success(res) {
						if (res.code == 200) {
							uni.redirectTo({
								url: "/pages/order/index"
							})
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
			//底部评论按钮
			resubmits(item) {
				if (item.label == '同意' || item.label == '拒绝' || item.label == '评论') {
					this.commentFn(item)
				} else if (item.label == '转交') {
					uni.navigateTo({
						url: '../../../component/search/search?type=' + 'changeUser'
					})
				} else {
					this.editFn(item.api, item.id)
				}

			},
			// 编辑提交
			commentFn(e) {
				let that = this;
				let url = '';
				if (e.label == '拒绝' && that.confirmList.length == 0) {
					url = '/api/order.audit/reject';
				} else if (e.label == '同意' && that.confirmList.length == 0) {
					url = '/api/order.audit/accept'
				} else {
					url = e.api;
				}
				request.request({
					url: url,
					showLoading: true,
					token: true,
					data: {
						id: that.confirm_id,
						content: e.content ? e.content : '',
						image: e.image ? e.image : '',
					},
					success(res) {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
							that.getDetail(that.options)
							that.getConfirmList()
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="less">
	uni-page-body {
		padding-top: 0;
	}

	@import url('../../order/createOrder/components/common.less');
	@import url('../../order/components/common.less');

	.income-container {
		padding-bottom: 120upx;
		
		.addPic {
			position: relative;
			overflow: hidden;
			width: 68upx;
			height: 68upx;
			border: 1px solid #CCCCCC;
			margin-left: 20upx;
		
			image {
				width: 68upx;
				height: 68upx;
				margin-right: 37upx;
			}
		}

		.footer-box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0 16px;
			display: flex;
			align-items: center;
			height: 100upx;
			font-size: 28upx;
			background-color: #FFFFFF;
			border-top: 1px solid #dedede;
			z-index: 9;

			.footer-title {
				flex: 0 15%;
			}

			.footer-action-btn {
				flex: 1;
				text-align: end;

				button {
					background-color: #007AFF;
					color: #FFFFFF;
				}

				button+button {
					margin-left: 5px;
				}

			}

		}
	}
</style>
